<template>
	<view class="indexBig">
		<view class="top">
			<u-icon name="arrow-left" size="36" @click="goToBack"></u-icon>
			<text>下单流程</text>
		</view>
		<view class="shareBox" v-if="showCopy">
			<view class="stepTop">
				<u-icon name="checkmark-circle-fill" size="42" color="#EA7130"></u-icon>
				<view class="hr"></view>
				<view class="point"></view>
				<view class="hr"></view>
				<view class="point"></view>
				<view class="hr"></view>
				<view class="point">
				</view>
			</view>
			<view class="stepText">
				<view class="">付款成功</view>
				<view class="">复制订单</view>
				<view class="">发送到群</view>
				<view class="">下单成功</view>
			</view>
			<view class="info">
				<!-- <view class="">
				您的取餐号【{{orderInfo.pickingSerialNo}}】，菜品【{{orderInfo.nameDishes}}】，取餐地址【{{orderInfo.pickingAddress}}】
				</view> -->
				<view class="">取餐序号：{{orderInfo.pickingSerialNo}}号</view>
				<view class="">菜品：{{orderInfo.nameDishes}}</view>
				<view class="">取餐地址：{{orderInfo.pickingAddress}}</view>
			</view>
			<!-- <view class="button" @click="copy">点击复制</view> -->
			<!-- <view class="warn">
				<view class="">
					请复制订单内容发送到群通知工作人员！
				</view>
			</view> -->
		</view>
		<view class="orderBox">
			<view class="listContent" id="listContent">
				<template v-if="orderList.length != 0">
					<view class="list" v-for="(item, index) in orderList" :key="index">
						<view>{{ item.pickingSerialNo }}</view>
						<view>{{ item.nameTakingMeal }}</view>
						<view>{{ item.nameDishes }}</view>
						<view>{{ item.createTimeStr }}</view>
					</view>
				</template>
			</view>
			<u-empty text="暂时还没有人下单哦" mode="page" v-if="orderList.length == 0"></u-empty>
		</view>
		<u-modal v-model="show" content="请点击复制生成链接发送到点餐群，下单流程才可成功！"></u-modal>

    <!-- 点餐接龙 -->
    <u-modal v-model="copyModal"
      title="点餐接龙" content="发送到点餐群，通知老板接单！"
      confirmText="复制订单" confirmColor="#ff8739" @confirm="copy"
    ></u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getCreateOrderNum,
		getMyInfo,
		getOrderInfoById,
		getAddressDetInfo
	} from '@/utils/req/api.js';
	import CommenHeader from '@/components/header/header.vue';
	export default {
		components: {
			CommenHeader
		},
		data() {
			return {
				orderInfo: '',
				orderList: [],
				clickNum: 0,
				show: false,

				pageNo: 1,
				pageSize: -1,
				moreOrderFlag: false,

				myInfo: '',

				showCopy: false, //是否显示复制信息的内容
				copyModal: true,
			};
		},
		mounted() {
			// this.getMyInfo();

			// this.orderInfo = JSON.parse(uni.getStorageSync('successOrderInfo'));
			// this.getCreateOrderNum();
			//监听滚动事件
			document.getElementById('listContent').addEventListener('scroll', this.getMoreOrder, true);

			this.getOrderInfoById();
		},
		onShow() {
			console.log('触发了onShow');
		},

		methods: {
			async getOrderInfoById() {
				console.log('-----', uni.getStorageSync('successOrderInfo'));
				let res = await getOrderInfoById({
					id: JSON.parse(uni.getStorageSync('successOrderInfo')).id
				});
				console.log('通过id查询订单信息', res);
				this.orderInfo = res.data.result;
				this.getCreateOrderNum();
				this.getAddressDetInfo(res.data.result.addressId);
			},
			async getAddressDetInfo(id) {
				let res = await getAddressDetInfo({
					id
				});
				console.log('详细地址信息res', res);
				this.showCopy = res.data.result.enableCopyOrder == '是' ? true : false;
				this.copyModal = res.data.result.enableCopyOrder == '是' ? true : false;
			},
			async getMyInfo() {
				let res = await getMyInfo();
				this.myInfo = res.data.result;
			},
			async getCreateOrderNum(type) {
				let res = await getCreateOrderNum({
					addressId: this.orderInfo.addressId,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				});
				if (type != 'push') {
					this.orderList = res.data.result.records;
				} else {
					this.orderList = [...this.orderList, ...res.data.result.records];
				}
			},
			copy() {
				let tempUrl = uni.getStorageSync('isSpecial') ? 'https://www.yongshantuan.cn/#/bcwl' :
					'https://www.yongshantuan.cn'
				uni.setClipboardData({
					data: `老板，我在用膳团下单了，送到记得通知我哦～\n${this.orderInfo.pickingSerialNo}号 ${this.orderInfo.nameDishes} ${
					this.orderInfo.pickingAddress
				}\n👇👇👇点餐接龙：\n${tempUrl}`,
					success: () => {
						this.clickNum = this.clickNum + 1;
            this.copyModal = false
						//调用方法成功
						uni.hideToast();

            this.$refs.uToast.show({
              type: 'success',
						  title: '复制成功',
              duration: 3000,
            })
					}
				});
			},
			goToBack() {
				uni.navigateTo({
					// url: '/pages/index/index'
					url: '/pages/home/index'
				});
			},
			getMoreOrder() {
				let scrollTop = document.documentElement.scrollTop; //滚动高度
				let clientHeight = document.documentElement.clientHeight; //可视高度
				let scrollHeight = document.documentElement.scrollHeight; //内容高度
				if (scrollHeight - scrollTop - 10 <= clientHeight) {
					if (!this.moreOrderFlag) {
						this.moreOrderFlag = true;
						if (this.orderList.length != 0 && this.orderList.length % 10 == 0) {
							this.pageNo = this.pageNo + 1;
							this.getCreateOrderNum('push');
							setTimeout(() => {
								this.moreOrderFlag = false;
							}, 1000);
						}
					}
				}
			}
		},
		onHide() {
			//监听滚动事件
			document.getElementById('listContent').removeEventListener('scroll', this.getMoreOrder);

			console.log('触发了onHide');
		}
	};
</script>

<style lang="scss" scoped>
	.indexBig {
		min-height: 100vh;
		background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
		background-size: 100vw 466rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
		padding: 40rpx 20rpx;
		padding-bottom: 150rpx;
		.top {
		position: relative;
  	height: 40rpx;
    text-align: center;
    .u-icon {
      position: absolute;
      left: 0;
    }
	}

		.shareBox {
			margin: 40rpx 0;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx 40rpx 80rpx 40rpx;

			.warn {
				text-align: center;

				>view:nth-child(1) {
					font-weight: bold;
				}

				>view {
					font-size: 28rpx;
					line-height: 2;
				}

				margin-bottom: 40rpx;
				color: #fa690a;
			}

			.stepTop {
				@include flexs(space-around, center);
				padding: 0 20rpx;

				.point {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: #fa690a;

					&:first-child {
						// margin-left: 5%;
					}

					&:last-child {
						// margin-right: 2.5%;
					}
				}

				.hr {
					width: 30%;
					height: 5rpx;
					background-color: #fa690a;
					border-radius: 20rpx;
				}

				.success {
					width: 40rpx;
					height: 40rpx;
					position: relative;

					image {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						left: 5rpx;
						top: 5rpx;
					}
				}
			}

			.stepText {
				@include flexs(space-between, center);
				font-size: 32rpx;
				font-weight: bold;
				line-height: 2;
				padding: 10rpx 0;
			}

			.info {
				font-size: 28rpx;
				line-height: 2;
				// color: rgba(0, 0, 0, 0.55);

				>view:nth-child(1) {
					color: #000;
				}
			}

			.button {
				// width: 226rpx;
				width: 100%;
				height: 72rpx;
				font-size: 28rpx;
				line-height: 72rpx;
				// border-radius: 60rpx;
				color: #fff;
				background-color: #fa690a;
				text-align: center;
				margin: 0 auto;
				margin-top: 48rpx;
			}
		}

		.orderBox {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			min-height: 40vh;
			margin-top: 40rpx;

			/deep/.u-empty {
				min-height: 40vh;
			}

			.listContent {
				>.list {
					@include flexs();
					font-size: 22rpx;
					line-height: 74rpx;
					margin: 20rpx 0;
					padding: 10rpx 0;
					background-color: #f3f3f3;

					>view:nth-child(1) {
						text-align: center;
						width: 5%;
						margin: 0 1%;
					}

					>view:nth-child(2) {
						width: 15%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					>view:nth-child(3) {
						width: 50%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin: 0 1.5%;
					}

					>view:nth-child(4) {
						font-size: 22rpx;
						width: 25%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
	}

	.warnBox {
		width: 100%;
		height: 100vh;
		@include flexs(center, center);
		position: fixed;
		left: 0;
		top: 0;
		transition: all 0.2s;
		display: none;

		>view {
			width: 80%;
			height: 100rpx;
			background-color: rgba(0, 0, 0, 0.7);
			border-radius: 20rpx;
			color: #fff;
			@include flexs(center, center);
			padding: 80rpx 40rpx;
		}
	}

	.warnBoxShow {
		display: flex;
	}
</style>